<template>
    <div class="symptomlist">
        <Row>
            <Col :xs="24">
                <Button type="primary" @click="add" class="addbutton" style="width:51px;height:35px;">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                </Button>
                <Input class="w-input" v-model="searchKey" clearable placeholder="症状名称"/>
                <Button type="primary" @click="loadPage(1)" style="width:51px;height:35px;">
                    <Icon type="ios-search" size="14"/>
                </Button>
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="symptomList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
			v-model="fundcode"
            :title = "title"
			:footer="null"
            styles="padding: none;margin: none"
        >  	
            <div class="doctorreviewedit">
                <p class="title">基本信息</p>
            <Form ref="formInline" :model="info" :rules="infoRules" inline>
                <Row class>
                    <Col class="borderRight">
                        <Row>
                            <Col :xs="24">
                                <i class="req-icon">*</i>症状名称：
                                <FormItem prop="symptom">
                                    <Input
                                        class="w-input"
                                        v-model="info.symptom"
                                        :maxlength="20"
                                        placeholder="请输入症状名称"
                                    />
                                </FormItem>
                            </Col>
                            <Col :xs="24">
                                <i class="req-icon">*</i>针对人群：
                                <FormItem prop="gender">
                                    <Select class="w-select" v-model="info.gender">
                                        <Option value="1">男</Option>
                                        <Option value="2">女</Option>
                                        <Option value="3">所有</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Form> 
        </div>
        <div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="submit('formInline')" :disabled='disabledSave' style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="fundcode = false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
		</Modal>			
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            searchKey: "",
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "症状名称",
                    key: "symptom",
                    align: "center",
                    // width: 300
                },
                {
                    title: "针对人群",
                    key: "gender",
                    align: "center",
                    width: 300,
                    render: (h, params) => {
                        let gender = params.row.gender;
                        let peoples =
                            gender == 1 ? "男" : gender == 2 ? "女" : "所有";
                        return h("span", {
                            domProps: {
                                innerHTML: peoples
                            }
                        });
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center",
                    width: 300,
                    render: (h, params) => {
                        let status = params.row.status;
                        let statusText = status == 1 ? "正常" : "已删除";
                        return h("span", {
                            domProps: {
                                innerHTML: statusText
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let id = params.row.id;
                        let index = params.row._index;
                        let status = params.row.status;
                        let btnText = "恢复";
                        status == 1 && (btnText = "删除");
                        return [
                            h(
                                "sapn",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#5362e1',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.fundcode = true,
                                            this.title = '症状编辑'
                                            this.id = id
                                            this.$refs.formInline.fields[0].validateMessage  = ''
                                            this.$refs.formInline.fields[0].validateState = ''
                                            this.$refs.formInline.fields[1].validateState = ''
                                            this.$refs.formInline.fields[1].validateMessage  = ''
                                            this.$axios
                                                .post(api.getDymptomById, { id: id })
                                                .then(resp => {
                                                    this.info = resp.data.object;
                                                })
                                                .catch(err => {
                                                    // this.$Message.info("服务器超时，请重新访问")
                                                });
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            " | ",
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#fc6c49',
                                        marginLeft: "6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.changeStatus(
                                                id,
                                                index,
                                                status
                                            );
                                        }
                                    }
                                },
                                btnText
                            )
                        ];
                    }
                }
            ],
            symptomList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: "",
            info: {
                symptom: "",
                gender: "3"
            },
            infoRules: {
                symptom: [
                    {
                        required: true,
                        message: "症状名称不能为空",
                        trigger: "blur"
                    }
                ],
                gender: [
                    {
                        required: true,
                        message: "针对人群不能为空",
                        trigger: "blur"
                    }
                ],
            },
            disabledSave: false
        };
    },
    created() {
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : "";
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/configurationWarehouse/index",
                title: "配置仓"
            },
            {
                path: "/index/maintain/symptom/list",
                title: "症状字典"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = pageNo;
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.getDymptomPage, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if(resp.data.object.records){
                            this.symptomList = resp.data.object.records;
                            for (let i = 0; i < this.symptomList.length; i++) {
                                let item = this.symptomList[i];
                                this.symptomList[i].iNum = i + 1;
                            }
                        } else {
                            this.symptomList = []
                            this.count = 0
                        }       
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        add() {
            this.fundcode = true
            this.title = '症状新增'
            this.info.symptom = ''
            this.info.gender = ''
            this.id = ''
        },
        changeStatus(id, index, status) {
            let params = {},
                tmpStatus,
                noticeMsg;
                params.id = id;
            if (status == 1) {
                params.status = "0";
                tmpStatus = 0;
                noticeMsg = "删除";
            } else {
                params.status = "1";
                tmpStatus = 1;
                noticeMsg = "恢复";
            }
            this.$axios
                .post(api.newDymptom, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.symptomList[index].status = tmpStatus;
                    } else {
                        this.$Message.info(noticeMsg + "失败，请重试");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //提交
        submit(name) {
            this.disabledSave = true
            this.$refs[name].validate(valid => {
                if (valid) {
                    let operateApi = '';
                    let subMitObj = {};
                    let message = ''
                    if (this.id) {
                      operateApi = api.newDymptom;
                      message = '修改成功'
                      subMitObj.id = parseInt(this.info.id);
                    } else {
                      operateApi = api.newDymptom;
                      message = '添加成功'
                    }
                    subMitObj.symptom = this.info.symptom.trim();
                    subMitObj.gender = this.info.gender;
                    console.log(subMitObj);
                    this.$axios
                        .post(operateApi, subMitObj)
                        .then(resp => {
                            console.log(resp);
                            if (resp.data.code == 1) {
                                this.$Message.success(message)
                                setTimeout(() => {
                                    //   公用方法
                                    this.disabledSave = false                                 
                                    this.loadPage(this.pageNo);
                                },1000)
                                this.fundcode = false
                            } else {
                                setTimeout(() => {
                                    //   公用方法
                                    this.disabledSave = false
                                    // this.fundcode = false
                                    this.loadPage(this.pageNo);
                                },10000)
                                this.$Message.error(resp.data.message);
                                this.fundcode = false
                            }                           
                        })
                        .catch(err => {
                            console.log(err);
                            setTimeout(() => {
                                //   公用方法
                                this.disabledSave = false
                                
                                this.loadPage(this.pageNo);
                            },10000)
                            this.fundcode = false
                        });
                } else {
                    this.$Message.error("请完整填写必填项");
                    //   公用方法
                    this.disabledSave = false
                    this.loadPage(this.pageNo);
                }
            });
        },
    }
};
</script>
<style lang="less" scoped>
.symptomlist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 300px;
    }
    .m-table {
        margin: 10px 0;
    }
    .addbutton{
        background-color: #21c780;
        border: 1px solid #21c780;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.doctorreviewedit {
    width: 98%;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 20px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;         
    }
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 300px;
    }
    .req-icon {
        font-size: 18px;
        color: red;
        display: inline-block;
        height: 18px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        vertical-align: middle;
        margin-left: 25px;
    }
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>